<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
	<div class="mainBox">
			<div class="main-container">
				<div class="main-container">
					<div class="layui-form-item">
						<label class="layui-form-label">账户名称：</label>
						<div class="layui-input-block">
							<input type="text" name="username" lay-verify="title" autocomplete="on" placeholder="请 输 入" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">账户密码：</label>
						<div class="layui-input-block">
							<input type="password"  name="password" lay-verify="title" autocomplete="off" placeholder="请 输 入" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">联系电话：</label>
						<div class="layui-input-block">
							<input type="text"  name="phone" lay-verify="title" autocomplete="off" placeholder="请 输 入（非 必 填）" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">联系邮箱：</label>
						<div class="layui-input-block">
							<input type="text"  name="email" lay-verify="title" autocomplete="off" placeholder="请 输 入（非 必 填）" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">人生信言：</label>
						<div class="layui-input-block">
							<textarea placeholder="座 右 铭" value="" class="layui-textarea" name="remark"></textarea>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">账户头像：</label>
						<button type="button" class="layui-btn layui-btn-danger" id="uploadimage"><i class="layui-icon"></i>选择图片</button>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">预览头像：</label>
						<img class="layui-upload-img" id="demo1" width="200px" height="100px">
					</div>
			</div>
		</div>
	</div>
	<div class="bottom">
		<div class="button-container">
			<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="user-save">
				<i class="layui-icon layui-icon-ok"></i>
				提交
			</button>
			<button type="reset" class="pear-btn pear-btn-sm">
				<i class="layui-icon layui-icon-refresh"></i>
				重置
			</button>
		</div>
	</div>
</form>
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>
<script>
	layui.use(['form','jquery'],function(){
		let form = layui.form;
		let $ = layui.jquery;

		// 这儿进行图片的上传
		layui.use(['upload', 'form'], function(){
			var upload = layui.upload;
			//执行实例
			upload.render({
				elem: '#uploadimage' //绑定元素
				,url: '/uploadImage' //上传接口
				,exts: 'jpg|png|jpeg' // 上传的类型
				,auto: false
				,bindAction: '#uploadMessage'
				,choose:function(obj){
					obj.preview(function(index,file,result){
						$('#demo1').attr('src', result);
					});
				}
			});
		});

		form.on('submit(user-save)', function(data){
			console.log(data.field);
			if(data.field.file === ""){
				layer.msg("请交出你的图片！", {
					icon: 2,
					time: 1000
				});
				return false;
			}
			$.ajax({
				url:'/Admin/saveHr',
				data:JSON.stringify(data.field),
				dataType:'json',
				contentType:'application/json',
				type:'post',
				success:function(result){
					if(result.code === 0){
						layer.msg(result.msg,{icon:1,time:2000},function(){
							parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
						});
					}else{
						layer.msg(result.msg,{icon:2,time:2000});
					}
				}
			})

			return false;
		});
	})
</script>
</body>
</html>